<template>
  <div
    style="
      margin: 0 auto;
      border: solid 0px;
      width: 800px;
      text-align: center;
      padding-top: 100px;
    "
  >
    <h1>注册</h1>
    <div style="border: solid 0px; width: 300px; margin: 0 auto">
      <el-form
        id="userFrom"
        :model="userForm"
        :rules="rules"
        ref="userForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="账号" prop="userCode">
          <el-input name="userCode" v-model="userForm.userCode"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="userPassword">
          <el-input name="userPassword" type="password" v-model="userForm.userPassword"></el-input>
        </el-form-item>

         <el-form-item label="用户名" prop="userName">
          <el-input name="userName" type="text" v-model="userForm.userName"></el-input>
        </el-form-item>

         <el-form-item label="生日" prop="userBirthday">
          <el-date-picker v-model="userForm.userBirthday" type="date" placeholder="选择日期">
    </el-date-picker>
        </el-form-item>

         <el-form-item label="电话" prop="userPhone">
          <el-input name="userPhone" type="text" v-model="userForm.userPhone"></el-input>
        </el-form-item>

        <el-form-item label="性别">
          <el-radio-group v-model="userForm.userGender">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('userForm')"
            >提交</el-button
          >
          <el-button @click="login">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      userForm: {
      },
      rules: {
        userCode: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在2到5个字符', trigger: 'blur' }
        ],
        userPassword: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在2到10个字符', trigger: 'blur' }
        ],
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在1到10个字符', trigger: 'blur' }
        ],
        userBirthday: [
          { required: true, message: '请选择出生日期', trigger: 'blur' }
        ],
        userPhone: [
          { required: true, message: '请输入电话号码', trigger: 'blur' }
        ],
        userGender: [
          { required: true, message: '请选择性别', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let formData = new FormData(document.getElementById('userFrom'))
          this.axios
            .post('http://localhost:8081/user/register', formData)
            .then((result) => {
              console.log(result.data)
              // eslint-disable-next-line eqeqeq
              if (result.data.responseCode == 200) {
                alert(result.data.responseMessage)
                sessionStorage.setItem('user', JSON.stringify(result.data.object.user))
                this.$router.push('Login')
              }
            })
          // alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    login () {
      this.$router.replace('/login')
    }
  }
}
</script>
